<template>
  <div class="box">
    <!-- 头部导航栏 -->
    <div class="top">
      <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      
    >
    <el-menu-item index="0">京东首页</el-menu-item>
      <el-sub-menu index="1">
          <template #title>山东</template>
          <el-menu-item index="1-1">北京</el-menu-item>
          <el-menu-item index="1-2">天津</el-menu-item>
          <el-menu-item index="1-3">上海</el-menu-item>
          <el-sub-menu index="1-4">
            <template #title>地级市</template>
            <el-menu-item index="1-4-1">临沂</el-menu-item>
            <el-menu-item index="1-4-1">青岛</el-menu-item>
            <el-menu-item index="1-4-3">淄博</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>用户</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>item four</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="3">我的订单</el-menu-item>
      <el-sub-menu index="4">
          <template #title>我的京东</template>
          <el-menu-item index="4-1">待处理订单</el-menu-item>
          <el-menu-item index="4-2">返修且换货</el-menu-item>
          <el-menu-item index="4-3">降价商品</el-menu-item>
          <el-sub-menu index="4-4">
            <template #title>我的京东豆</template>
            <el-menu-item index="4-4-1">我的优惠券</el-menu-item>
            <el-menu-item index="4-4-2">我的白条</el-menu-item>
            <el-menu-item index="4-4-3">我的理财</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
         <el-sub-menu index="5">
            <template #title>企业采购</template>
            <el-menu-item index="5-1">企业购</el-menu-item>
            <el-menu-item index="5-2">工业品</el-menu-item>
            <el-menu-item index="5-3">礼品卡</el-menu-item>
            <el-sub-menu index="5-4">
              <template #title>工品优选</template>
              <el-menu-item index="5-4-1">公告采购</el-menu-item>
              <el-menu-item index="5-4-2">商用场景馆</el-menu-item>
              <el-menu-item index="5-4-3">微信企业购</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="6">
              <template #title>客户服务</template>
              <el-menu-item index="6-1">客户</el-menu-item>
              <el-menu-item index="6-2">商户</el-menu-item>
              <el-menu-item index="6-3">企业</el-menu-item>
              <el-sub-menu index="6-4">
                <template #title>地区商户</template>
                <el-menu-item index="6-4-1">合作招商</el-menu-item>
                <el-menu-item index="6-4-2">商家后台</el-menu-item>
                <el-menu-item index="6-4-3">商家帮助</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>客户服务</template>
              <el-menu-item index="7-1">特色主题</el-menu-item>
              <el-menu-item index="7-2">行业频道</el-menu-item>
              <el-menu-item index="7-3">生活服务</el-menu-item>
              <el-sub-menu index="7-4">
                <template #title>更多精选</template>
                <el-menu-item index="7-4-1">京东通信</el-menu-item>
                <el-menu-item index="7-4-2">服务城市</el-menu-item>
                <el-menu-item index="7-4-3">关于我们</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="8">
              <template #title>网站导航</template>
              <el-menu-item index="2-1">item one</el-menu-item>
              <el-menu-item index="2-2">item two</el-menu-item>
              <el-menu-item index="2-3">item three</el-menu-item>
              <el-sub-menu index="2-4">
                <template #title>item four</template>
                <el-menu-item index="2-4-1">item one</el-menu-item>
                <el-menu-item index="2-4-2">item two</el-menu-item>
                <el-menu-item index="2-4-3">item three</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="9">手机京东</el-menu-item>
            <el-menu-item index="10">网站无障碍</el-menu-item>
    </el-menu>

    <div class="h-6" />
    </div>
  
    <!-- 京东logo加搜素匡 -->
    <div class="center">
        <img class="img" src="../assets/微信图片_20240320093043.png" alt="">
        <div class="center-buttom">
          <input  type="text" v-model="name"><button @click="addname">搜素</button>
        </div>
        
    </div>

    <!-- 配送地址 -->
    <div class="center1">
      <p>全部商品 &nbsp; {{ num }}</p>
        <div class="center1-top" >
            <h3>配送至：</h3>
            <div class="m-4">
                  <el-cascader placeholder="请选择地址"  v-model="value1" :options="options" @change="handleChange" />
              </div>
        </div>
    </div>
    <div class="center2">
    <!-- 表单 -->
      <el-table :data="cartList" style="width: 100%">
      <el-table-column prop="id" label="序号" width="150" />
      <el-table-column prop="name" label="商品名称" width="200" />
      <el-table-column prop="specification" label="规格" width="150" />
      <el-table-column prop="price" label="单价" width="150" />
      <el-table-column prop="num" label="数量" width="200" />
      <el-table-column prop="sum" label="小计金额" width="200" />
      <el-table-column  label="操作" width="200">
        <template #default>
          <el-button  link type="primary" size="small" @click="handleClick"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
  
</template>
<script setup>
import { ref } from 'vue'

const name = ref()
const addname = () => {
  alert(name.value)
  console.log(name.value);
}
const num = ref(3)
// const activeName = ref('first')
// const value = ref('')
// const radio1 = ref('1')

const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
const value1 = ref([])


const handleChange = (value) => {
  console.log(value)
}

const options = [
  {
    value: '北京',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: '天津',
    label: '天津',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'color',
            label: 'Color',
          },
          {
            value: 'typography',
            label: 'Typography',
          },
          {
            value: 'icon',
            label: 'Icon',
          },
          {
            value: 'button',
            label: 'Button',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
          {
            value: 'checkbox',
            label: 'Checkbox',
          },
          {
            value: 'input',
            label: 'Input',
          },
          {
            value: 'input-number',
            label: 'InputNumber',
          },
          {
            value: 'select',
            label: 'Select',
          },
          {
            value: 'cascader',
            label: 'Cascader',
          },
          {
            value: 'switch',
            label: 'Switch',
          },
          {
            value: 'slider',
            label: 'Slider',
          },
          {
            value: 'time-picker',
            label: 'TimePicker',
          },
          {
            value: 'date-picker',
            label: 'DatePicker',
          },
          {
            value: 'datetime-picker',
            label: 'DateTimePicker',
          },
          {
            value: 'upload',
            label: 'Upload',
          },
          {
            value: 'rate',
            label: 'Rate',
          },
          {
            value: 'form',
            label: 'Form',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'tag',
            label: 'Tag',
          },
          {
            value: 'progress',
            label: 'Progress',
          },
          {
            value: 'tree',
            label: 'Tree',
          },
          {
            value: 'pagination',
            label: 'Pagination',
          },
          {
            value: 'badge',
            label: 'Badge',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
          {
            value: 'loading',
            label: 'Loading',
          },
          {
            value: 'message',
            label: 'Message',
          },
          {
            value: 'message-box',
            label: 'MessageBox',
          },
          {
            value: 'notification',
            label: 'Notification',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu',
          },
          {
            value: 'tabs',
            label: 'Tabs',
          },
          {
            value: 'breadcrumb',
            label: 'Breadcrumb',
          },
          {
            value: 'dropdown',
            label: 'Dropdown',
          },
          {
            value: 'steps',
            label: 'Steps',
          },
        ],
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog',
          },
          {
            value: 'tooltip',
            label: 'Tooltip',
          },
          {
            value: 'popover',
            label: 'Popover',
          },
          {
            value: 'card',
            label: 'Card',
          },
          {
            value: 'carousel',
            label: 'Carousel',
          },
          {
            value: 'collapse',
            label: 'Collapse',
          },
        ],
      },
    ],
  },
  {
    value: '上海',
    label: '上海',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]
// 表单
import {reactive} from 'vue'
const cartList = reactive([
  {
    id: 1,
    name: 'xx手机',
    specification: ['big', 'samll'],
    price: 20,
    num: 1,
    sum:20
  }
])
const handleClick = () => {
  console.log('click')
}
</script>
<style lang="scss" scoped>
.box{
  background-color: #e3e4e5;
  height: 60px;
  margin: auto;
  .top{
    border: 1px solid #000;
    margin: auto;
    padding-left: 100px;
    .el-menu{
      background-color: #e3e4e5;
      font-size: 15px;
    }
}
  .center{
    width: 85%;
    margin: auto;   
    display: flex;
    justify-content: space-between;
    position: relative;
    .center-buttom{
      position: absolute;
      top: 50px;
      right: 0px;
      input{
        border: 2px solid red;
        height: 20px;
        width: 200px;
      }
      button{
        width: 50px;
        height: 24px;
        border-left:1px solid #ff0000 ;
        border: none;
        background-color: #c91623;
        color: white;
      }
    }
    .img{
      width: 200px;
      height: 120px;
    }
  }
  .center1{
    width: 85%;
    margin: auto;   
    display: flex;
    justify-content: space-between;
    
    p{
      color: red;
      font-weight: 600;
    }
    .center1-top{
      display: flex;
      justify-content: space-between;
      .m-4{
        padding-top: 15px;
      }
    }
  }
  .center2{
    width: 85%;
    margin: auto;
    background-color: #f3f3f3;
  }
}
</style>
